<template>
    <div class="brand">
        <!-- search -->
        <div class="search">
            <input class="searchInput" @focus="inputFocus" @blur="inputBlur" v-model="searchInput">
            <i class="search-icon" v-show="searchShow"></i>
            <span class="searchPlaceHolder" v-show="searchShow">搜索</span>
        </div>
        <mTitle :title="title"></mTitle>
        <scroll class="brand-container" :data="brandList" v-show="!searchInput">
            <div>
                <ul class="brand-item">
                    <li class="brand-first" @click.stop="handleClickDetail(firstList.id, firstList.ctype, firstList.sourceurl)">
                        <img class="first-img" v-lazy="firstList.coverimg" alt="" />
                        <div class="brand-first-title">
                            <h2 class="first-title">{{firstList.title}}</h2>
                            <span class="date">{{firstList.createtime}}</span>
                        </div>
                    </li>
                    <li class="brand-odd" v-for="(item, index) in brandListOdd" :key="item.id" @click.stop="handleClickDetail(item.id, item.ctype, item.sourceurl)">
                        <div class="left">
                            <h2 class="list-title">{{item.title}}</h2>
                            <span class="date">{{item.createtime}}</span>
                            <p class="desc-content" v-html="item.content"></p>
                            <i class="daosanjiao"></i>
                        </div>
                        <div class="right">
                            <img class="list-img" v-lazy="item.coverimg" alt="" />
                        </div>
                    </li>
                    <li class="brand-even" v-for="(item, index) in brandListEven" :key="item.id" @click.stop="handleClickDetail(item.id, item.ctype, item.sourceurl)">
                        <div class="right">
                            <img class="list-img" v-lazy="item.coverimg" alt="" />
                        </div>
                        <div class="left">
                            <h2 class="list-title">{{item.title}}</h2>
                            <span class="date">{{item.createtime}}</span>
                            <p class="desc-content" v-html="item.content"></p>
                            <i class="daosanjiao"></i>
                        </div>
                    </li>
                    <!-- <li class="brand-list" v-for="(item, index) in brandList" :key="item.id" @click.stop="handleClickDetail(item.id, item.ctype, item.sourceurl)">
                        <span class="date">{{item.createtime}}</span>
                        <h2 class="list-title">{{item.title}}</h2>
                        <img class="list-img" v-lazy="item.coverimg" alt="" />
                        <p class="desc" v-html="item.content"></p>
                        <split v-show="brandList.length-1 != index"></split>
                    </li> -->
                    <li class="brand-list-end" v-show="endMore && brandList != null">
                        <span class="text">已经到最底部啦</span>
                    </li>
                </ul>
            </div>
            <div class="no-brand" v-show="brandList === null">
                <span class="text">暂无任何品牌活动信息</span>
            </div>
        </scroll>
        <!-- 匹配搜索结果 -->
        <scroll class="brand-container" :data="list" v-show="list.length">
            <div>
                <ul class="brand-item">
                    <li class="brand-list" v-for="(item, index) in list" :key="item.id" @click.stop="handleClickDetail(item.id, item.ctype, item.sourceurl)">
                        <span class="date">{{item.createtime}}</span>
                        <h2 class="list-title">{{item.title}}</h2>
                        <img class="list-img" :src="item.coverimg" alt="" />
                        <p class="desc" v-html="item.content"></p>
                        <split v-show="list.length-1 != index"></split>
                    </li>
                </ul>
            </div>
        </scroll>
        <div class="no-result" v-show="!list.length && searchInput">暂无搜索结果</div>
        <router-view></router-view> 
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import Split from 'base/split/split'

    export default {
        data () {
            return {
                searchInput: "",
                searchShow: true,
                endMore: false,
                title: "品牌活动",
                brandTotal: [],
                brandList: [],
                brandListEven: [],
                brandListOdd: [],
                list: [],
                firstList: {}
            }
        },
        methods: {
            inputFocus () {
                this.searchShow = false
            },
            inputBlur () {
                if (this.searchInput === "") {
                    this.searchShow = true
                }
            },
            handleClickDetail (id, flag, url) {
                if (flag === "1") {
                    this.$router.push({
                        path: '/brandDetail/' + id
                    })
                } else {
                    window.location.href = url
                }
            },
            getBrandInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=brandactlist', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid")
                }).then((res) => {
                    // 请求成功
                    if (res.data.rescode === "0000") {
                        this.brandTotal = res.data.data.list
                        this.firstList = res.data.data.list[0]
                        this.brandList = this.curtail(res.data.data.list)
                        this.brandListEven = this.arrEven(this.brandList)
                        this.brandListOdd = this.arrOdd(this.brandList)
                        this.endMore = true
                    }
                }).catch(function (error) {
                    // 请求失败
                })
            },
            // 数组中的偶数元素判断
            arrEven (arr) {
                let evenArr = []
                for (let i=0;i<arr.length;i++) {
                    if (i%2 === 0) {
                        evenArr.push(arr[i])
                    }
                }
                return evenArr
            },
            // 数组中的奇数元素判断
            arrOdd (arr) {
                let oddArr = []
                for (let i=0;i<arr.length;i++) {
                    if (i%2 != 0) {
                        oddArr.push(arr[i])
                    }
                }
                return oddArr
            },
            // 删除数组中的首个元素
            curtail (arr) {
                return arr.filter(function(ele,idx,arr){
                return idx !== 0;
                })
            }
        },
        watch: {
            // 监听input变化进行搜索判断
            searchInput () {
                this.list = []
                let result = []
                if(this.searchInput === "") {
                    result = []
                    this.list = []
                    return
                }
                for (let i in this.brandTotal) {
                    let value = this.brandTotal[i].title
                    if(value.indexOf(this.searchInput) > -1) {
                        result.push(i)
                    }
                }
                for(let k in result) {
                    this.list = this.list.concat(this.brandTotal[result[k]])
                }
            }
        },
        components: {mTitle,Loading,Split,Scroll},
        created () {
            this.getBrandInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .brand
        width: 100%
        height: 100%
        position: relative
        background: #fff
        .search
            width: 100%
            height: 44px
            background: #efeff4
            padding: 0 15px
            box-sizing: border-box
            -webkit-box-sizing: border-box
            position: relative
            overflow: hidden
            .searchInput
                width: 100%
                height: 32px
                background: #fff
                margin-top: 6px
                border: none
                border-radius: 0
                padding: 0 10px
                box-sizing: border-box
                -webkit-box-sizing: border-box
            .search-icon
                position: absolute
                background: url('./search-icon.png') no-repeat
                width: 13px
                height: 13px
                background-size: 100% 100%
                top: 16px
                left: 50%
                margin-left: -15px
            .searchPlaceHolder
                font-size: 14px
                color: #979797
                position: absolute
                top: 17px
                left: 51%
        .no-result
            padding: 0 15px
            line-height: 30px
            font-size: 16px
            color: #888
        .brand-container
            position: absolute
            top: 86px
            width: 100%
            bottom: 0
            overflow: hidden
            .no-brand
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
                text-align: center
                left: 0
                right: 0
                .text
                    font-size: 20px
                    color: #0094d4
            .brand-item
                width: 100%
                height: 100%
                .brand-odd,.brand-even
                    width: 100%
                    padding: 0 23px
                    margin-top: 10px
                    box-sizing: border-box
                    -webkit-box-sizing: border-box
                    font-size: 0
                    display: flex
                    height: 150px
                    .left
                        flex: 0 0 110px
                        width: 110px
                        height: 150px
                        background: #ed8285
                        padding: 0 10px
                        box-sizing: border-box
                        -webkit-box-sizing: border-box
                        display: flex
                        flex-direction: column
                        position: relative
                        .daosanjiao
                            width: 0
                            height: 0
                            border-bottom: 5px solid transparent
                            border-top: 5px solid transparent
                            border-left: 5px solid #ed8285
                            position:absolute
                            top: 50%
                            left: 100%
                        .list-title
                            font-size: 12px
                            color: #fff
                            line-height: 140%
                            margin-top: 16px
                            text-align: justify
                        .date
                            font-size: 10px
                            color: #fff
                            margin-top: 8px
                        .desc-content
                            font-size: 10px
                            line-height: 130%
                            margin-top: 8px
                            color: #fff
                    .right
                        flex: 1
                        height: 150px
                        img
                            width: 100%
                            height: 100%
                .brand-even
                    .left
                        background: #f0b642
                        .daosanjiao
                            width: 0
                            height: 0
                            border-bottom: 5px solid transparent
                            border-top: 5px solid transparent
                            border-left: 5px solid transparent
                            border-right: 5px solid #f0b642
                            position:absolute
                            top: 50%
                            left: -10px
                .brand-first
                    width: 100%
                    padding: 0 23px
                    margin-top: 10px
                    box-sizing: border-box
                    -webkit-box-sizing: border-box
                    font-size: 0
                    .first-img
                        width: 100%
                    .brand-first-title
                        width: 100%
                        height: 36px
                        line-height: 36px
                        background: #0094d4
                        color: #fff
                        padding: 0 10px
                        box-sizing: border-box
                        -webkit-box-sizing: border-box
                        display: flex
                        .first-title
                            flex: 1
                            font-size: 16px
                            color: #fff
                            margin-right: 10px
                            ellipsis()
                        .date
                            flex: 0 0 120px
                            width: 120px
                            font-size: 10px
                            color: #fff
                            text-align: right
                .brand-list-end
                    border-top: 1px solid #eee
                    height: 40px
                    line-height: 40px
                    width: 100%
                    text-align: center
                    box-sizing: border-box
                    .text
                        color: #888
                        font-size: 14px
                .brand-list
                    width: 100%
                    position: relative
                    padding-top: 10px
                    box-sizing: border-box
                    touch-action: none
                    .date
                        font-size: 12px
                        color: #888
                        display: block
                        width: 100%
                        text-align: center
                        padding: 0 23px
                        box-sizing: border-box
                    .list-title
                        font-size: 16px
                        line-height: 130%
                        color: #000
                        margin-top: 28px
                        padding: 0 23px
                        box-sizing: border-box
                    .list-img
                        width: 100%
                        height: 180px
                        display: block
                        margin-top: 17px
                        padding: 0 23px
                        box-sizing: border-box
                    .desc
                        font-size: 14px
                        color: #888
                        margin-top: 8px
                        line-height: 150%
                        margin-bottom: 8px
                        padding: 0 23px
                        box-sizing: border-box
                        text-align: justify
                
</style>